// 全局样式文件 - 黑白灰极简配色方案

// 毛玻璃效果 mixin
@mixin glassmorphism($blur: 10px, $opacity: 0.8) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

// 深色模式毛玻璃效果
@mixin dark-glassmorphism($blur: 10px, $opacity: 0.2) {
  background: rgba(30, 30, 30, $opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

// 极简配色方案
$background-light: #f8f9fa;
$background-dark: #1a1a1a;
$card-bg-light: #ffffff;
$card-bg-dark: #2d2d2d;
$text-primary-light: #212529;
$text-secondary-light: #6c757d;
$text-primary-dark: #f8f9fa;
$text-secondary-dark: #adb5bd;
$border-color-light: #e9ecef;
$border-color-dark: #495057;

// 主要颜色 - 黑白灰
$primary-color: #000000;
$primary-hover: #333333;
$secondary-color: #6c757d;
$accent-color: #adb5bd;

// 深色主题颜色
$dark-primary-color: #ffffff;
$dark-primary-hover: #cccccc;
$dark-secondary-color: #adb5bd;
$dark-accent-color: #6c757d;

// 圆角
$border-radius: 8px;
$border-radius-lg: 12px;
$border-radius-sm: 4px;

// 过渡动画
$transition-base: all 0.2s ease-in-out;
$transition-fast: all 0.1s ease-in-out;

// 阴影
$shadow-small: 0 1px 3px rgba(0, 0, 0, 0.05);
$shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
$shadow-large: 0 10px 20px rgba(0, 0, 0, 0.15);

// 深色模式阴影
$dark-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.2);
$dark-shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.3);
$dark-shadow-large: 0 10px 20px rgba(0, 0, 0, 0.4);

// 响应式断点
$breakpoint-xs: 480px;
$breakpoint-sm: 768px;
$breakpoint-md: 1024px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1600px;

// 丝滑滚动
html {
  scroll-behavior: smooth;
}

// 全局字体
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 毛玻璃卡片样式
.glass-card {
  @include glassmorphism();
  border-radius: $border-radius;
  transition: $transition-base;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-medium;
  }
}

// 深色模式下的毛玻璃卡片
.dark .glass-card {
  @include dark-glassmorphism();
  
  &:hover {
    box-shadow: $dark-shadow-medium;
  }
}

// 毛玻璃按钮
.glass-button {
  @include glassmorphism(8px, 0.7);
  border-radius: $border-radius-sm;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  transition: $transition-fast;
  color: $text-primary-light;
  font-weight: 500;
  
  &:hover {
    @include glassmorphism(8px, 0.9);
    transform: translateY(-1px);
    box-shadow: $shadow-small;
  }
  
  &:active {
    transform: translateY(0);
  }
}

// 深色模式下的毛玻璃按钮
.dark .glass-button {
  @include dark-glassmorphism(8px, 0.3);
  color: $text-primary-dark;
  
  &:hover {
    @include dark-glassmorphism(8px, 0.5);
    box-shadow: $dark-shadow-small;
  }
}

// 毛玻璃导航栏
.glass-navbar {
  @include glassmorphism(12px, 0.85);
  border-radius: 0 0 $border-radius $border-radius;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

// 深色模式下的毛玻璃导航栏
.dark .glass-navbar {
  @include dark-glassmorphism(12px, 0.25);
}

// 毛玻璃容器
.glass-container {
  @include glassmorphism(20px, 0.7);
  border-radius: $border-radius-lg;
  padding: 24px;
  transition: $transition-base;
}

// 深色模式下的毛玻璃容器
.dark .glass-container {
  @include dark-glassmorphism(20px, 0.15);
}